@include('Home.head')
<link rel="stylesheet" href="{{ URL::asset('css/home/layui.css') }}">
<style>
    .tc_goods{
        width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    position: fixed;
    background: #0c0d0d4f;
    padding: 15px;
    }
    .del{
        text-align: end;
    color: white;
    position: absolute;
    right: 15px;
    font-size: 20px;
    }
    .share_mark{
        position: relative;
    top: 50%;
    background: white;
    padding-bottom: 50px;
    border-radius: 10px;
    transform: translate(0px, -50%);
    }
    .goods_img{
        display:  inline-flex;
    width: 80px;
    height: 80px;
    box-shadow: 0px 2px 5px 0px #d3d3d3;
    }
    .goods_xq{
        display: inline-block;
        margin-left: 10px;
    }
    .goods{
        padding:10px 15px;
        position: relative;
    }
    .bottom{
        width:180px;
height:40px;
background:linear-gradient(180deg,rgba(255,132,31,1) 0%,rgba(255,0,0,1) 100%);
box-shadow:0px 3px 6px rgba(255,0,0,0.4);
opacity:1;
border-radius:27px;
text-align: center;
    margin: 0 auto;
    line-height: 40px;
    margin-top: 50px;
    position: absolute;
    transform: translate(50%, -99%);
    }
    .bottom>a{
        font-size:14px;
        font-weight:500;
        color:rgba(255,255,255,1);
        opacity:1;

    }
    .text{
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: rgba(51,51,51,1);
    opacity: 1;
    padding-bottom: 40px;
    }
    .money{
        font-size:20px;
        font-weight:500;
        line-height:20px;
        color:rgba(255,23,0,1);
        opacity:1;

    }
    .bottom1{
    position: absolute;
    right: 25px;
    top: 65px;
    background: linear-gradient(180deg,rgba(255,132,31,1) 0%,rgba(255,0,0,1) 100%);
    box-shadow: 0px 3px 6px rgba(255,0,0,0.4);
    opacity: 1;
    border-radius: 27px;
    padding: 5px 15px;
    }
    .bottom1>a{
        color:rgba(255,255,255,1);
    }
    .goods_div{
        height: 130px;
        overflow: scroll;
    }
	.spanpin{
		background-color: #ff6a5b;
		border-radius: 6px 9px 9px 0px;
		color: #FFFFFF;
		padding: 0px 8px;
		float: left;
	}
	.spanpinbt{
		background-color:#ff6a5b;
		color: #FFFFFF;
		margin-top: -30px;
	}
	.goodlist{
		border-radius: 12px;
		height: 280px; 
		border: #ffffff 2px solid;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.pin{
		color: #FFFFFF;
		position: absolute;
		border-radius: 7px;
		background-color: #ff6a5b;
		 width: 60px;
		height: 30px;
		font-size: 18px;
		padding: 2px;
		/* margin-left: 10%; */
	}
	.imageh{
		height: 152px;
		width: 100%;
	}
	.op{
		text-decoration:line-through;
		color: gray;
		font-weight: 600;
		margin-top: 7px;
		padding-left: 0px;
		font-size: 12px;
		padding-right: 25px;
	}
	.p3{
		font-family: "Lucida Console";
	}
	.product-buyer-name {
	
	width: 90px;
	
	overflow: hidden;
	
	text-overflow: ellipsis;
	
	white-space: nowrap;
	
	}
		.am-header-title a{
		font-size:17px;
	}
</style>
<body>
<div class="container" id="app">
    <header data-am-widget="header" class="am-header am-header-default" style="border-bottom:#F2F2F2 2px solid;background-color: #000000;">
		<div class="am-header-left am-header-nav">
		    <a  onclick="javascript:history.back(-1);" class="">
		        <i class="am-header-icon am-icon-chevron-left"></i>
		    </a>
		</div>
        <h1 class="am-header-title">
            <a href="#title-link" class="" style="color: rgb(255,215,0);font-weight: 600;">源头厂家</a>
        </h1>
    </header>
    <!-- banner -->
    <!-- <div data-am-widget="slider" class="am-slider am-slider-a1" data-am-slider='{&quot;directionNav&quot;:false}' style="box-shadow:none">
        <el-carousel>
            <el-carousel-item v-for="(item,index) in rotation" :key="index" style="border-bottom:#F2F2F2 2px solid;">
                <a v-on:click="pay(item.gid)" >
                    <img :src="item.goods_thumb" width="100%" height="100%">
                </a>
            </el-carousel-item>
        </el-carousel>
    </div> -->

    <div data-am-widget="tabs" class="am-tabs am-tabs-default" id="sort-nav">
      <ul class="am-tabs-nav am-cf"  id="type-ul">
         <li class="" v-for="val in classifyDate">
            <a href="javascript:;" v-on:click="changeType(val.id)" :id="'type-a-check' + val.id" >@{{ val.name }}</a>
        </li>
      </ul>
      <div class="am-tabs-bd">
        <div class="am-cf am-g">
           <ul class="am-avg-sm-2 my-shop-product-list" style="box-shadow: none;">
           
               <!-- <li v-for="val in goods">
           
                   <div class="am-panel am-panel-default goodlist">
           
                       <div class="am-panel-bd">
						
							<span class="spanpin">@{{ val.buy_num }}人拼团</span>
				
                           <img class="am-img-responsive imageh" :src="val.goods_thumb"    v-on:click="pay(val.id)"/>
           
                           <h3 class="p3 product-buyer-name"><a href="#" style="font-weight: 600;padding-left: 0px;">@{{ val.goodsname }}</a></h3>
           
                           <div>
           
                               <span class="list-product-price-span2" style="font-weight: 600;padding-left: 0px;border: none;">￥@{{ val.rulingprice }}</span>
           
                           </div>
           
                           <hr data-am-widget="divider" class="am-divider am-divider-default am-cf" style="width: 0.1px;background-color: #EE7600;"/>
           				
           				<div>
           					<span class="list-product-price-span2 op" style="border: none;margin-top: -11px;">￥@{{ val.originalprice }}</span>
           				</div>
           
                           <ol class="am-avg-sm-2 product-list-share">
           
                               {{--<li class="am-text-sm">积分：200</li>--}}
           
                               <button class="am-btn am-btn-danger am-btn-xs index-addcart-btn pin" v-on:click="pay(val.id)" style="margin-top: -28px;padding: 0px 2px;">拼</button>
           
                           </ol>
           
                       </div>
           
                   </div>
           
               </li> -->
			   
			   
           </ul>
		   <li v-for="val in goods">
		   <div class='withdrawals-panel' v-on:click="pay(val.id)" style="border-radius: 12px;margin: 10px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
		   <div style='width: 20%;float: left;display: inline;' >
		   <img :src="val.pic" style='border-radius: 12px;width: 100%;height: 80px;'/>
		   </div>
		   <div class='groupby-info-panle' style='width: 19%'>
		   <h2><button class="am-btn am-btn-danger am-btn-xs index-addcart-btn pin" v-on:click="pay(val.id)" style="margin-top: 25px;padding: 0px 2px;font-size: 10px;">查看详情</button></h2>
		   </div>
		   <div class='groupby-info-panle' style='width: 52%'>
		   <h3 style="font-weight: 600;"><a>@{{ val.factory_name }}</a></h3>
		   <span style="color: red;font-weight: 600;">联系电话：@{{ val.phone }}</span><br/>
		   <span>经营类目:@{{ val.management }}</span>
		   </div>
		   </div>
		   </li>
            <li class="layui-flow-more" v-if="loading">加载中</li>
        </div>
      </div>
  </div>
  <footer data-am-widget="navbar" class="am-navbar am-cf sxy-footer" id="">
      <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: white;">
          <li>
              <a href="/home/excellent/index" class="">
                      <img src="http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%205%20%E2%80%93%201%40.png" alt="首页"/>
                  <span class="am-navbar-label">首页</span>
              </a>
          </li>
          <li>
              <a href="/home/index/resale_goods" class="">
                      <img src="http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%206%20%E2%80%93%201%40.png" alt="折扣" />
                  <span class="am-navbar-label">折扣</span>
              </a>
          </li>
          <li>
              <a href="/home/index/sort_detail?cid=7" class="">
              
                      <img src="http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%207%20%E2%80%93%201%40.png" alt="引流"/>
                  <span class="am-navbar-label">引流</span>
              </a>
          </li>
          <li>
              <a href="/home/member/index" class="footer-active">
                  <img src="http://qiniu.baoliy168.com/%E7%BB%84%E4%BB%B6%208%20%E2%80%93%201%40.png" alt="我的"/>
                  <span class="am-navbar-label">我的</span>
              </a>
          </li>
      </ul>
  </footer>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            show:false,
            goods: [],
            classifyDate:{},
            rotation:[],
            classifyFirst:'',
            page: '',//总页数
            nowPage: '',//本页
            loading: false,//异步加载时的限制
            bottomHight: 50,//滚动条到某个位置才触发时间
            goodss:'',
			list:{},
			buy_num:'',
			view:''
            // pay_status:0
        },
        //事件
        methods: {
            del(){
                   this.show=false
            },
            handleScroll: function () {
                if (getScrollBottomHeight() <= app.bottomHight && app.nowPage < app.page && app.loading == false) {
                    app.loading = true;
                    $.get("/home/index/get_factory", {'_token': '{{csrf_token()}}',class:'select',page:app.nowPage+1}, function (res) {

                        for (var i = 0; i < res.data.length; i++) {
                            app.goods.push(res.data[i]);
                        }
                        app.nowPage++;
                        app.loading = false;
                    });
                }
            },
            initialize:function () {
                $.post("/home/index/get_factory", {'_token': '{{csrf_token()}}',class:'select',two_tid:0}, function (res) {
                    // console.log(res)
                    if (res.code == 1) {
						app.goods = res.data;
                    } else {
                        layer.msg(res.data,{icon:8});
                    }
                });
            },
           
            //支付页面
            pay:function (id) {
                /*if ( id == 3 ) {
                    layer.msg("此产品正在升级中,请耐心等待,谢谢!");
                    return false;
                }*/
                 window.location.href="/home/index/factory_detail?id="+id;
				
            },
            changeType:function(g){

                $.post("/home/microShop/smallshop", {'_token': '{{csrf_token()}}',class:'select',two_tid:g}, function (res) {
                    //console.log(res)
                    if (res.code) {
                        app.classifyDate = res.classifyDate;
                        app.classifyFirst = res.classifyFirst;
                        $("#type-a-check"+g).parent("li").siblings().removeClass('am-active');
                        $("#type-a-check"+g).parent("li").addClass("am-active");
                        app.page = res.data.last_page;
                        app.nowPage = res.data.current_page;
                        app.goods = res.data.data
                    } else {
                        layer.msg(res.data);
                    }
                });
            }
        },
        //自动执行
        mounted: function () {
             this.initialize();
            // $.post("/home/microShop/smallshop", {'_token': '{{csrf_token()}}',class:'package'},res=> {
            //         if(res.code==1){
            //             this.show=true
            //             this.goodss=res.data
            //             // this.pay_status=this.goodss.pay_status
            //             console.log( this.goodss)
            //         }else{
            //             // console.log(res)
            //             this.show=false
            //         }   
            //     });
        },
    });
    //添加滚动事件
    window.onload = function () {
        window.addEventListener('scroll', app.handleScroll)
    }
    //滚动条到底部的距离
    function getScrollBottomHeight() {
        return getPageHeight() - getScrollTop() - getWindowHeight();

    }
    //页面高度
    function getPageHeight() {
        return document.querySelector("html").scrollHeight
    }
    //滚动条顶 高度
    function getScrollTop() {
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }

</script>
</html>
